<template>
	<view>
	<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
	   <view class="propertyBox">
	     <view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in modules" :key="index" @tap="tabSelect" :data-id="index">
	       {{ item.name }}
	     </view>
	   </view>
	 </scroll-view>
 
	 <view class="content" v-for="(item, index) in approveList" :key="item.id" @click="goProDetail(item)">
		 
		   <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-if="TabCur == 0 && item.status == 0">
				<view class="cu-form-group-ccl" >
					<view style="display: flex; flex: 1; flex-wrap: wrap; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">
						<view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item) }">
							{{bindTag(item)}}
						</view>
					</view>
					<view class="topTitleV unitV">{{item.subTime}}</view>
				</view>
				
				<view class="topTitleV" style="margin-left: 10px;">
					{{ item.username + "的" +  item.fromName}}
				</view>
		   </view>
		   
		   
		   <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-if="TabCur == 1 && item.status == 1">
				<view class="cu-form-group-ccl" >
					<view style="display: flex; flex: 1; flex-wrap: wrap; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">
						<view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item) }">
							{{bindTag(item)}}
						</view>
					</view>
					<view class="topTitleV unitV">{{item.subTime}}</view>
				</view>
				
				<view class="topTitleV" style="margin-left: 10px;">
					{{ item.username + "的" +  item.fromName}}
				</view>
		   </view>
		   
	</view>
	
</view>
</template>

<script>
	import common from '../../common/common.js';
	import request from '../../common/request';
	
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				 // 列表数组
				  approveList: [],
				  
				modules:[
					{"name": "待处理"},
					{"name": "已处理"},
					{"name": "抄送我"},
				],
			};
		},
		onLoad() {
		    this.staff = uni.getStorageSync("staff");
		    this.requestData();
		},
		methods: {
			goProDetail(item) {
				uni.navigateTo({
					url:'/pages/examine/approvalPage?fromId=' + item.fromId
				})
			},
			// 点击显示任务详情还是评论
			tabSelect(e) {
				var num = e.currentTarget.dataset.id;
					this.TabCur = num
				
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			},
			requestData() {
				
				// this.approveList = [
				// 	{
				// 		username:"毛周锐",
				// 		subTime:"2023-12-22",
				// 		status:"1",
				// 		fromName:"测试提交单",
				// 		fromId:"999"
				// 	},
				// 	{
				// 		username:"毛周锐",
				// 		subTime:"2023-12-23",
				// 		status:"0",
				// 		fromName:"测试审批单2",
				// 		fromId:"999"
				// 	}
				// ]
				
				request({
					url: common.base_url +'/system/form/queryApprovalRecord',
					data:{
					},
					header:{
					},
					method: 'GET',
					success: res => {
						if(res.data.code == 200){
							console.log(res)
							this.approveList = res.data.data;
							
						} else{
							uni.showToast({
								title: res.data.msg,
								icon:"error"
							})
						}
					},
					fail: function(e) {
						uni.hideLoading();
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e.msg)+"],请联系管理员",
							icon:"loading"
						})
					},
				});
			},
			bindTag(item) {
				/** 申请单状态  0-待审核  3-审核未通过 1-审核通过 2-审核中 */
				if(item.status == 0){
					return "未处理";
				} else if (item.status == 1){
					return '已处理';
				}
				// return [item.area, item.proType, item.status]
			},
			bindColor(item) {
				if(item.status == 0){
					return '#888481';
				} else if (item.status == 1){
					return '#3bb100';
				}
				// let colorArr = ['#4473FF', '#FFA01B', '#41D380'];
				// return colorArr[index % 3];
			},
			bindBgColor(item) {
				// if(item.status == 0){
				// 	return '#F1F4FA';
				// } else if (item.status == 1){
				// 	return '#ff0000';
				// }else if (item.status == 3){
				// 	return '#55ffff';
				// }else if (item.status == 4){
				// 	return '#5555ff';
				// }
			},
			
		}
	}
</script>
<style>
	
	.content {
	        display: flex;
	        flex-direction: column;
	
	    }
	    .mui-content-padded {
	        margin: 0px 14px;
	        /* background-color: #ffffff; */
	    }
	/* 导航栏 */
	.cu-item {
		text-align: center;
	  flex: 1; /* 设置每个元素的宽度为50% */
	}
	
	/* 导航栏固定一行 */
	.propertyBox{
			flex-flow: row;
			justify-content: flex-start;
			display: flex;
		}
		
		.cu-form-group-ccl {
			background-color: #ffffff;
			padding: 1upx 20upx;
			display: flex;
			align-items: center;
			min-height: 100upx;
			justify-content: space-between;
		}
		
		
		.uni-list-cell {
			flex-direction: column;
			margin-top: 10px;
			background-color: white;
			padding: 6px 12px;
		
		
		}
		
		.topTitleV {
		
			height: 26px;
			line-height: 26px;
			color: #333333;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		
		}
		.unitV{
			color: #555555;
			font-size: 12px;
			margin-top: 0px;
			font-family: PingFangSC-Regular, PingFang SC;
			
		}
		
		.cellView {
			margin-top: 8px;
			margin-left: 8px;
			height: 22px;
			line-height: 22px;
			text-align: center;
			border-radius: 2px;
			padding: 0px 4px !important;
			font-size: 12px;
		
			color: #4272FF;
			background: #F3F4F6;
		}
		
</style>